<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>iconfont Demo</title>
    <link
      rel="shortcut icon"
      href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
      type="image/x-icon"
    />
    <link
      rel="icon"
      type="image/svg+xml"
      href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"
    />
    <link
      rel="stylesheet"
      href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"
    />
    <link rel="stylesheet" href="demo.css" />
    <link rel="stylesheet" href="iconfont.css" />
    <script src="iconfont.js"></script>
    <!-- jQuery -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
    <!-- 代码高亮 -->
    <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
    <style>
      .main .logo {
        margin-top: 0;
        height: auto;
      }

      .main .logo a {
        display: flex;
        align-items: center;
      }

      .main .logo .sub-title {
        margin-left: 0.5em;
        font-size: 22px;
        color: #fff;
        background: linear-gradient(-45deg, #3967ff, #b500fe);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
  </head>
  <body>
    <div class="main">
      <h1 class="logo">
        <a
          href="https://www.iconfont.cn/"
          title="iconfont 首页"
          target="_blank"
        >
          <img
            width="200"
            src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg"
          />
        </a>
      </h1>
      <div class="nav-tabs">
        <ul id="tabs" class="dib-box">
          <li class="dib active"><span>Unicode</span></li>
          <li class="dib"><span>Font class</span></li>
          <li class="dib"><span>Symbol</span></li>
        </ul>

        <a
          href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4420853"
          target="_blank"
          class="nav-more"
          >查看项目</a
        >
      </div>
      <div class="tab-container">
        <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
              <div class="name">性别-男</div>
              <div class="code-name">&amp;#xe628;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
              <div class="name">性别-女</div>
              <div class="code-name">&amp;#xe629;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
              <div class="name">向右箭头</div>
              <div class="code-name">&amp;#xe65f;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe88e;</span>
              <div class="name">进入箭头</div>
              <div class="code-name">&amp;#xe88e;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
              <div class="name">笑脸</div>
              <div class="code-name">&amp;#xe608;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
              <div class="name">笑脸</div>
              <div class="code-name">&amp;#xe609;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
              <div class="name">个人中心-激活</div>
              <div class="code-name">&amp;#xe60a;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
              <div class="name">订单</div>
              <div class="code-name">&amp;#xe64e;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
              <div class="name">首页</div>
              <div class="code-name">&amp;#xe64f;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe602;</span>
              <div class="name">首页</div>
              <div class="code-name">&amp;#xe602;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
              <div class="name">首页</div>
              <div class="code-name">&amp;#xe603;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
              <div class="name">保洁员</div>
              <div class="code-name">&amp;#xe604;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
              <div class="name">首页</div>
              <div class="code-name">&amp;#xe607;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
              <div class="name">隐私/不可见</div>
              <div class="code-name">&amp;#xe649;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe780;</span>
              <div class="name">相机2</div>
              <div class="code-name">&amp;#xe780;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
              <div class="name">相机</div>
              <div class="code-name">&amp;#xe63d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
              <div class="name">相机</div>
              <div class="code-name">&amp;#xe672;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
              <div class="name">关于</div>
              <div class="code-name">&amp;#xe6a1;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
              <div class="name">搜索</div>
              <div class="code-name">&amp;#xe673;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xebb3;</span>
              <div class="name">云上传_o</div>
              <div class="code-name">&amp;#xebb3;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xec8c;</span>
              <div class="name">点赞_块</div>
              <div class="code-name">&amp;#xec8c;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe736;</span>
              <div class="name">文件-账单</div>
              <div class="code-name">&amp;#xe736;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8ba;</span>
              <div class="name">图片</div>
              <div class="code-name">&amp;#xe8ba;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
              <div class="name">商户批量入驻</div>
              <div class="code-name">&amp;#xe62d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
              <div class="name">收藏</div>
              <div class="code-name">&amp;#xe68e;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
              <div class="name">相机</div>
              <div class="code-name">&amp;#xe61e;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
              <div class="name">闪电</div>
              <div class="code-name">&amp;#xe605;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
              <div class="name">客服</div>
              <div class="code-name">&amp;#xe612;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
              <div class="name">地址</div>
              <div class="code-name">&amp;#xe641;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe627;</span>
              <div class="name">收藏</div>
              <div class="code-name">&amp;#xe627;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
              <div class="name">返回</div>
              <div class="code-name">&amp;#xe60c;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe8a9;</span>
              <div class="name">时间</div>
              <div class="code-name">&amp;#xe8a9;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6d0;</span>
              <div class="name">退货保障</div>
              <div class="code-name">&amp;#xe6d0;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
              <div class="name">实名认证</div>
              <div class="code-name">&amp;#xe61f;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
              <div class="name">招聘</div>
              <div class="code-name">&amp;#xe651;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
              <div class="name">实名认证</div>
              <div class="code-name">&amp;#xe613;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe61c;</span>
              <div class="name">消费记录</div>
              <div class="code-name">&amp;#xe61c;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
              <div class="name">消费记录</div>
              <div class="code-name">&amp;#xe63a;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe624;</span>
              <div class="name">地址</div>
              <div class="code-name">&amp;#xe624;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
              <div class="name">我的店铺客服</div>
              <div class="code-name">&amp;#xe60d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe941;</span>
              <div class="name">赔付1</div>
              <div class="code-name">&amp;#xe941;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe6a9;</span>
              <div class="name">优质区</div>
              <div class="code-name">&amp;#xe6a9;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
              <div class="name">实名</div>
              <div class="code-name">&amp;#xe65d;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
              <div class="name">海尔创吧-01</div>
              <div class="code-name">&amp;#xe600;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
              <div class="name">客服</div>
              <div class="code-name">&amp;#xe606;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
              <div class="name">w_爱心</div>
              <div class="code-name">&amp;#xe660;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe63b;</span>
              <div class="name">优质厂商</div>
              <div class="code-name">&amp;#xe63b;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe76c;</span>
              <div class="name">合作</div>
              <div class="code-name">&amp;#xe76c;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
              <div class="name">收藏</div>
              <div class="code-name">&amp;#xe648;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
              <div class="name">举报</div>
              <div class="code-name">&amp;#xe669;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#xe601;</span>
              <div class="name">赔付</div>
              <div class="code-name">&amp;#xe601;</div>
            </li>

            <li class="dib">
              <span class="icon iconfont">&#x10184;</span>
              <div class="name">收藏</div>
              <div class="code-name">&amp;#x10184;</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="unicode-">Unicode 引用</h2>
            <hr />

            <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
            <ul>
              <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
              <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
            </ul>
            <blockquote>
              <p>
                注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol
                引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
              </p>
            </blockquote>
            <p>Unicode 使用步骤如下：</p>
            <h3 id="-font-face">
              第一步：拷贝项目下面生成的 <code>@font-face</code>
            </h3>
            <pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1706000690929') format('woff2'),
       url('iconfont.woff?t=1706000690929') format('woff'),
       url('iconfont.ttf?t=1706000690929') format('truetype');
}
</code></pre>
            <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
            <pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
            <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
            <pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
            <blockquote>
              <p>
                "iconfont" 是你项目下的
                font-family。可以通过编辑项目查看，默认是 "iconfont"。
              </p>
            </blockquote>
          </div>
        </div>
        <div class="content font-class">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <span class="icon iconfont icon-xingbie-nan"></span>
              <div class="name">
                性别-男
              </div>
              <div class="code-name">.icon-xingbie-nan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xingbie-nv"></span>
              <div class="name">
                性别-女
              </div>
              <div class="code-name">.icon-xingbie-nv</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiangyoujiantou"></span>
              <div class="name">
                向右箭头
              </div>
              <div class="code-name">.icon-xiangyoujiantou</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jinrujiantou"></span>
              <div class="name">
                进入箭头
              </div>
              <div class="code-name">.icon-jinrujiantou</div>
            </li>

            <li class="dib">
              <span
                class="icon iconfont icon-morentupian_xiaolian_yiqueren"
              ></span>
              <div class="name">
                笑脸
              </div>
              <div class="code-name">.icon-morentupian_xiaolian_yiqueren</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiaolian1"></span>
              <div class="name">
                笑脸
              </div>
              <div class="code-name">.icon-xiaolian1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-gerenzhongxin-jihuo"></span>
              <div class="name">
                个人中心-激活
              </div>
              <div class="code-name">.icon-gerenzhongxin-jihuo</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dingdan"></span>
              <div class="name">
                订单
              </div>
              <div class="code-name">.icon-dingdan</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tubiao-"></span>
              <div class="name">
                首页
              </div>
              <div class="code-name">.icon-tubiao-</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-A-"></span>
              <div class="name">
                首页
              </div>
              <div class="code-name">.icon-A-</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shouye"></span>
              <div class="name">
                首页
              </div>
              <div class="code-name">.icon-shouye</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jishi"></span>
              <div class="name">
                保洁员
              </div>
              <div class="code-name">.icon-jishi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shouye-1"></span>
              <div class="name">
                首页
              </div>
              <div class="code-name">.icon-shouye-1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yihangyige"></span>
              <div class="name">
                隐私/不可见
              </div>
              <div class="code-name">.icon-yihangyige</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiangji2"></span>
              <div class="name">
                相机2
              </div>
              <div class="code-name">.icon-xiangji2</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiangji"></span>
              <div class="name">
                相机
              </div>
              <div class="code-name">.icon-xiangji</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiangji1"></span>
              <div class="name">
                相机
              </div>
              <div class="code-name">.icon-xiangji1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-guanyu"></span>
              <div class="name">
                关于
              </div>
              <div class="code-name">.icon-guanyu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-icon-test"></span>
              <div class="name">
                搜索
              </div>
              <div class="code-name">.icon-icon-test</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-yunshangchuan_o"></span>
              <div class="name">
                云上传_o
              </div>
              <div class="code-name">.icon-yunshangchuan_o</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dianzan_kuai"></span>
              <div class="name">
                点赞_块
              </div>
              <div class="code-name">.icon-dianzan_kuai</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-wj-zd"></span>
              <div class="name">
                文件-账单
              </div>
              <div class="code-name">.icon-wj-zd</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tupian"></span>
              <div class="name">
                图片
              </div>
              <div class="code-name">.icon-tupian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shanghupiliangruzhu"></span>
              <div class="name">
                商户批量入驻
              </div>
              <div class="code-name">.icon-shanghupiliangruzhu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shoucang1"></span>
              <div class="name">
                收藏
              </div>
              <div class="code-name">.icon-shoucang1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiangji3"></span>
              <div class="name">
                相机
              </div>
              <div class="code-name">.icon-xiangji3</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shandian"></span>
              <div class="name">
                闪电
              </div>
              <div class="code-name">.icon-shandian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-kefu"></span>
              <div class="name">
                客服
              </div>
              <div class="code-name">.icon-kefu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dizhi"></span>
              <div class="name">
                地址
              </div>
              <div class="code-name">.icon-dizhi</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shoucangfill"></span>
              <div class="name">
                收藏
              </div>
              <div class="code-name">.icon-shoucangfill</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-fanhui"></span>
              <div class="name">
                返回
              </div>
              <div class="code-name">.icon-fanhui</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shijian"></span>
              <div class="name">
                时间
              </div>
              <div class="code-name">.icon-shijian</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-tuihuobaozhang"></span>
              <div class="name">
                退货保障
              </div>
              <div class="code-name">.icon-tuihuobaozhang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shimingrenzheng"></span>
              <div class="name">
                实名认证
              </div>
              <div class="code-name">.icon-shimingrenzheng</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-zhaopin"></span>
              <div class="name">
                招聘
              </div>
              <div class="code-name">.icon-zhaopin</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shimingrenzheng1"></span>
              <div class="name">
                实名认证
              </div>
              <div class="code-name">.icon-shimingrenzheng1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiaofeijilu"></span>
              <div class="name">
                消费记录
              </div>
              <div class="code-name">.icon-xiaofeijilu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-xiaofeijilu1"></span>
              <div class="name">
                消费记录
              </div>
              <div class="code-name">.icon-xiaofeijilu1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-dizhi1"></span>
              <div class="name">
                地址
              </div>
              <div class="code-name">.icon-dizhi1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-kefu1"></span>
              <div class="name">
                我的店铺客服
              </div>
              <div class="code-name">.icon-kefu1</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-peifu"></span>
              <div class="name">
                赔付1
              </div>
              <div class="code-name">.icon-peifu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-youzhiqu"></span>
              <div class="name">
                优质区
              </div>
              <div class="code-name">.icon-youzhiqu</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shiming"></span>
              <div class="name">
                实名
              </div>
              <div class="code-name">.icon-shiming</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-haierchuangba-"></span>
              <div class="name">
                海尔创吧-01
              </div>
              <div class="code-name">.icon-haierchuangba-</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-kefu2"></span>
              <div class="name">
                客服
              </div>
              <div class="code-name">.icon-kefu2</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-w_aixin"></span>
              <div class="name">
                w_爱心
              </div>
              <div class="code-name">.icon-w_aixin</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-youzhichangshang"></span>
              <div class="name">
                优质厂商
              </div>
              <div class="code-name">.icon-youzhichangshang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-hezuo"></span>
              <div class="name">
                合作
              </div>
              <div class="code-name">.icon-hezuo</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shoucang"></span>
              <div class="name">
                收藏
              </div>
              <div class="code-name">.icon-shoucang</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-jubao"></span>
              <div class="name">
                举报
              </div>
              <div class="code-name">.icon-jubao</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-a-zu195"></span>
              <div class="name">
                赔付
              </div>
              <div class="code-name">.icon-a-zu195</div>
            </li>

            <li class="dib">
              <span class="icon iconfont icon-shoucang2"></span>
              <div class="name">
                收藏
              </div>
              <div class="code-name">.icon-shoucang2</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="font-class-">font-class 引用</h2>
            <hr />

            <p>
              font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode
              书写不直观，语意不明确的问题。
            </p>
            <p>与 Unicode 使用方式相比，具有如下特点：</p>
            <ul>
              <li>
                相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon
                是什么。
              </li>
              <li>
                因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class
                里面的 Unicode 引用。
              </li>
            </ul>
            <p>使用步骤如下：</p>
            <h3 id="-fontclass-">
              第一步：引入项目下面生成的 fontclass 代码：
            </h3>
            <pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
            <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
            <pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
            <blockquote>
              <p>
                " iconfont" 是你项目下的
                font-family。可以通过编辑项目查看，默认是 "iconfont"。
              </p>
            </blockquote>
          </div>
        </div>
        <div class="content symbol">
          <ul class="icon_lists dib-box">
            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xingbie-nan"></use>
              </svg>
              <div class="name">性别-男</div>
              <div class="code-name">#icon-xingbie-nan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xingbie-nv"></use>
              </svg>
              <div class="name">性别-女</div>
              <div class="code-name">#icon-xingbie-nv</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiangyoujiantou"></use>
              </svg>
              <div class="name">向右箭头</div>
              <div class="code-name">#icon-xiangyoujiantou</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jinrujiantou"></use>
              </svg>
              <div class="name">进入箭头</div>
              <div class="code-name">#icon-jinrujiantou</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-morentupian_xiaolian_yiqueren"></use>
              </svg>
              <div class="name">笑脸</div>
              <div class="code-name">#icon-morentupian_xiaolian_yiqueren</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiaolian1"></use>
              </svg>
              <div class="name">笑脸</div>
              <div class="code-name">#icon-xiaolian1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-gerenzhongxin-jihuo"></use>
              </svg>
              <div class="name">个人中心-激活</div>
              <div class="code-name">#icon-gerenzhongxin-jihuo</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dingdan"></use>
              </svg>
              <div class="name">订单</div>
              <div class="code-name">#icon-dingdan</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tubiao-"></use>
              </svg>
              <div class="name">首页</div>
              <div class="code-name">#icon-tubiao-</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-A-"></use>
              </svg>
              <div class="name">首页</div>
              <div class="code-name">#icon-A-</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shouye"></use>
              </svg>
              <div class="name">首页</div>
              <div class="code-name">#icon-shouye</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jishi"></use>
              </svg>
              <div class="name">保洁员</div>
              <div class="code-name">#icon-jishi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shouye-1"></use>
              </svg>
              <div class="name">首页</div>
              <div class="code-name">#icon-shouye-1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yihangyige"></use>
              </svg>
              <div class="name">隐私/不可见</div>
              <div class="code-name">#icon-yihangyige</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiangji2"></use>
              </svg>
              <div class="name">相机2</div>
              <div class="code-name">#icon-xiangji2</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiangji"></use>
              </svg>
              <div class="name">相机</div>
              <div class="code-name">#icon-xiangji</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiangji1"></use>
              </svg>
              <div class="name">相机</div>
              <div class="code-name">#icon-xiangji1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-guanyu"></use>
              </svg>
              <div class="name">关于</div>
              <div class="code-name">#icon-guanyu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-icon-test"></use>
              </svg>
              <div class="name">搜索</div>
              <div class="code-name">#icon-icon-test</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-yunshangchuan_o"></use>
              </svg>
              <div class="name">云上传_o</div>
              <div class="code-name">#icon-yunshangchuan_o</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dianzan_kuai"></use>
              </svg>
              <div class="name">点赞_块</div>
              <div class="code-name">#icon-dianzan_kuai</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-wj-zd"></use>
              </svg>
              <div class="name">文件-账单</div>
              <div class="code-name">#icon-wj-zd</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tupian"></use>
              </svg>
              <div class="name">图片</div>
              <div class="code-name">#icon-tupian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shanghupiliangruzhu"></use>
              </svg>
              <div class="name">商户批量入驻</div>
              <div class="code-name">#icon-shanghupiliangruzhu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shoucang1"></use>
              </svg>
              <div class="name">收藏</div>
              <div class="code-name">#icon-shoucang1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiangji3"></use>
              </svg>
              <div class="name">相机</div>
              <div class="code-name">#icon-xiangji3</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shandian"></use>
              </svg>
              <div class="name">闪电</div>
              <div class="code-name">#icon-shandian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-kefu"></use>
              </svg>
              <div class="name">客服</div>
              <div class="code-name">#icon-kefu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dizhi"></use>
              </svg>
              <div class="name">地址</div>
              <div class="code-name">#icon-dizhi</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shoucangfill"></use>
              </svg>
              <div class="name">收藏</div>
              <div class="code-name">#icon-shoucangfill</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-fanhui"></use>
              </svg>
              <div class="name">返回</div>
              <div class="code-name">#icon-fanhui</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shijian"></use>
              </svg>
              <div class="name">时间</div>
              <div class="code-name">#icon-shijian</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-tuihuobaozhang"></use>
              </svg>
              <div class="name">退货保障</div>
              <div class="code-name">#icon-tuihuobaozhang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shimingrenzheng"></use>
              </svg>
              <div class="name">实名认证</div>
              <div class="code-name">#icon-shimingrenzheng</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-zhaopin"></use>
              </svg>
              <div class="name">招聘</div>
              <div class="code-name">#icon-zhaopin</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shimingrenzheng1"></use>
              </svg>
              <div class="name">实名认证</div>
              <div class="code-name">#icon-shimingrenzheng1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiaofeijilu"></use>
              </svg>
              <div class="name">消费记录</div>
              <div class="code-name">#icon-xiaofeijilu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-xiaofeijilu1"></use>
              </svg>
              <div class="name">消费记录</div>
              <div class="code-name">#icon-xiaofeijilu1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dizhi1"></use>
              </svg>
              <div class="name">地址</div>
              <div class="code-name">#icon-dizhi1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-kefu1"></use>
              </svg>
              <div class="name">我的店铺客服</div>
              <div class="code-name">#icon-kefu1</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-peifu"></use>
              </svg>
              <div class="name">赔付1</div>
              <div class="code-name">#icon-peifu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-youzhiqu"></use>
              </svg>
              <div class="name">优质区</div>
              <div class="code-name">#icon-youzhiqu</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shiming"></use>
              </svg>
              <div class="name">实名</div>
              <div class="code-name">#icon-shiming</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-haierchuangba-"></use>
              </svg>
              <div class="name">海尔创吧-01</div>
              <div class="code-name">#icon-haierchuangba-</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-kefu2"></use>
              </svg>
              <div class="name">客服</div>
              <div class="code-name">#icon-kefu2</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-w_aixin"></use>
              </svg>
              <div class="name">w_爱心</div>
              <div class="code-name">#icon-w_aixin</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-youzhichangshang"></use>
              </svg>
              <div class="name">优质厂商</div>
              <div class="code-name">#icon-youzhichangshang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-hezuo"></use>
              </svg>
              <div class="name">合作</div>
              <div class="code-name">#icon-hezuo</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shoucang"></use>
              </svg>
              <div class="name">收藏</div>
              <div class="code-name">#icon-shoucang</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-jubao"></use>
              </svg>
              <div class="name">举报</div>
              <div class="code-name">#icon-jubao</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-a-zu195"></use>
              </svg>
              <div class="name">赔付</div>
              <div class="code-name">#icon-a-zu195</div>
            </li>

            <li class="dib">
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-shoucang2"></use>
              </svg>
              <div class="name">收藏</div>
              <div class="code-name">#icon-shoucang2</div>
            </li>
          </ul>
          <div class="article markdown">
            <h2 id="symbol-">Symbol 引用</h2>
            <hr />

            <p>
              这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a
                href=""
                >文章</a
              >
              这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
            </p>
            <ul>
              <li>支持多色图标了，不再受单色限制。</li>
              <li>
                通过一些技巧，支持像字体那样，通过 <code>font-size</code>,
                <code>color</code> 来调整样式。
              </li>
              <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
              <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
            </ul>
            <p>使用步骤如下：</p>
            <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
            <pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
            <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
            <pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
            <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
            <pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
        </div>
      </div>
    </div>
    <script>
      $(document).ready(function() {
        $(".tab-container .content:first").show();

        $("#tabs li").click(function(e) {
          var tabContent = $(".tab-container .content");
          var index = $(this).index();

          if ($(this).hasClass("active")) {
            return;
          } else {
            $("#tabs li").removeClass("active");
            $(this).addClass("active");

            tabContent
              .hide()
              .eq(index)
              .fadeIn();
          }
        });
      });
    </script>
  </body>
</html>
